<template>
  <div class="container page">
    <van-nav-bar
        title="打赏记录"
        left-arrow
        @click-left="$router.back()"
        @click-right="showMenu"
    >
      <template #right>
        <i class="van-badge__wrapper iconfont iconfont-menu menuBtn" style="color: #fa59b5; font-size: 24px;"/>
      </template>
    </van-nav-bar>
    <div class="content">
      <div class="container" style="height: 100%">
        <van-tabs class="tabs" v-model="active">
          <van-tab name="0" title="全部"/>
          <van-tab name="1" title="已获积分"/>
          <van-tab name="2" title="待公布"/>
        </van-tabs>
        <van-pull-refresh class="pull-refresh" v-model="refresh"
                          success-text="刷新成功"
                          @refresh="onRefresh">
          <template #default>
            <van-list class="listcontainer" v-model="loading" :finished="finished" @load="onLoadPage">
              <div v-if="!rewardList || rewardList.length === 0" class="emptyView">
                <img class="emptyViewimg" :src="require('../../assets/img/tip/kong.png')">
                <p class="emptyViewText">暂无数据</p>
              </div>
              <div class="item" v-for="item in rewardList.data" :key="item.id">
                <div class="item_cell">
                  <div class="item_left">
                    <div class="item_cell_name">{{ item.name }}</div>
                    <div class="item_cell_period">{{ item.expect }} 期</div>
                  </div>
                  <div class="item_right">
                    <div class="item_cell_betMoney">{{ item.money }}</div>
                  </div>
                </div>
                <div class="item_cell">
                  <div class="item_left">
                    <div class="item_cell_playName">{{ item.type }}</div>
                  </div>
                  <div class="item_right" v-if="active !== 3">
                    <div class="item_cell_statusText">
                      <span>
                        <span style="color: green;" v-if="item.is_win == 1">+ {{ item.profit }}</span>
                        <span style="color: red;" v-if="item.is_win == 2">- {{ item.profit }}</span>
                        <span style="color: #aaa;" v-if="item.is_win == 0">未结算</span>
                      </span>
                    </div>
                  </div>
                </div>


              </div>
              <template #finished>
                <span v-if="rewardList && rewardList.length > 0">没有更多了</span>
              </template>
            </van-list>
          </template>
        </van-pull-refresh>
      </div>
    </div>
    <div v-if="menuShow" class="van-overlay mask1" style="animation-duration: 0.35s">

    </div>
    <div v-if="startTimeShow" class="van-overlay mask2" style="animation-duration: 0.35s;">
      <van-datetime-picker
          class="datetimepicker"
          v-model="startTime"
          type="date"
          @cancel="startTimeShow = false"
          @confirm="searchForm.startTime = startTime.format('yyyy-MM-dd'), startTimeShow = false"
      />
    </div>
    <div v-if="endTimeShow" class="van-overlay mask2" style="animation-duration: 0.35s;">
      <van-datetime-picker
          class="datetimepicker"
          v-model="endTime"
          type="date"
          @cancel="endTimeShow = false"
          @confirm="searchForm.endTime = endTime.format('yyyy-MM-dd'), endTimeShow = false"
      />
    </div>
    <div class="navigation" v-if="menuShow">
      <div class="timeBox">
        <div class="title">
          <div class="titleText">时间筛选</div>
        </div>
        <div class="datetimepickerBtnBox">
          <div class="datetimepickerBtn" @click="startTimeShow = true">
            <div class="datetimepickerBtnText">{{ searchForm.startTime }}</div>
          </div>
          <div class="datetimepickerBtnDashes">~</div>
          <div class="datetimepickerBtn" @click="endTimeShow = true">
            <div class="datetimepickerBtnText">{{ searchForm.endTime }}</div>
          </div>
        </div>
      </div>
      <div class="lotteryBox">
        <div class="title">
          <div class="titleText">全部任务</div>
        </div>
        <div class="lotteryWrapper">
          <!-- itemLightStyle itemDefaultStyle -->
          <div class="lotteryItem" v-for="item in services" :key="item.id"
               :class="searchForm.lid && searchForm.lid === item.id ? 'itemLightStyle' : 'itemDefaultStyle'"
               @click="changeService(item.id)">
            <div class="lotteryItemText"><span>{{ item.name }}</span></div>
          </div>
        </div>
      </div>
      <div class="bottomBox">
        <div class="resetBtn">
          <div class="bottomBtnText">重置</div>
        </div>
        <div class="confirmBtn">
          <div class="bottomBtnText" @click="submitSearch">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getRewardList} from "@api/UserReward";
import {getServiceList} from "@api/Service";

export default {
  name: "RecordList",
  watch: {
    active: function (n) {
      this.searchForm.status = n;
      this.initRewardList();
    }
  },
  data: function () {
    return {
      startTime: undefined,
      endTime: undefined,
      startTimeShow: false,
      endTimeShow: false,
      services: [],
      searchForm: {
        status: 0,
        lid: undefined,
        startTime: undefined,
        endTime: undefined,
        page: 1
      },
      rewardList: [],
      menuShow: false,
      active: "",
      loading: false,
      finished: true,
      refresh: false
    };
  },
  activated() {
    this.startTime = new Date();
    this.startTime.setDate(1);
    this.endTime = new Date();

    this.searchForm.startTime = '';
    this.searchForm.endTime = '';
    this.initRewardList();
  },
  created() {
    this.initService();
  },
  methods: {
    initService: function () {
      getServiceList().then(v => {
        this.services = v.data;
      })
    },
    changeService: function (id) {
      if (!this.searchForm.lid) {
        this.searchForm.lid = id;
      } else if (this.searchForm.lid === id) {
        this.searchForm.lid = undefined;
      } else {
        this.searchForm.lid = id;
      }
    },
    initRewardList: function () {
      getRewardList(this.searchForm).then(v => {
        this.rewardList = v.data;
        // try {
        //   this.rewardList.forEach(v1 => {
        //     let profit = 0;
        //     let names = [];
        //     v1.data.forEach(v2 => {
        //       names.push(v2.type);
        //       if (v2.is_win)
        //         profit += parseFloat(v2.profit);
        //     })
        //     v1.rewards = names.join(",");
        //   })
        // } catch (e){}
      })
    },
    onLoadPage: function () {
      this.searchForm.page++;
      getWalletChangeList(this.limit, this.page).then(v => {
        this.list = this.list.concat(v.data.data);
        this.total = v.data.total;
      })
    },
    showMenu: function () {
      this.menuShow = true;
    },
    onRefresh: function () {
      setTimeout(() => {
        this.refresh = false;
        this.loading = false;
        this.finished = true;
        this.searchForm = {
          status: 0,
          lid: undefined,
          startTime: undefined,
          endTime: undefined,
          page: 1
        };
        this.initRewardList();
      }, 1000);
    },
    submitSearch: function () {
      this.menuShow = false;
      this.initRewardList();
    },
    formatter(type, val) {
      if (type === "year") {
        return `${val}-`;
      } else if (type === "month") {
        return `${val}-`;
      }
      return val;
    }
  }
};
</script>
<style scoped>
::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

::v-deep .van-tabs__content {
  height: calc(100% - 1.22667rem)
}

::v-deep .van-list__finished-text {
  background-color: #f4ebf3;
}

::v-deep .van-tab {
  color: #f2f2f5
}

::v-deep .van-tab--active {
  color: #fff
}

::v-deep .van-tab__pane {
  height: 100%
}

::v-deep.van-tab__panel {
  height: 100%
}

::v-deep .van-tabs__line {
  background: #fff
}

::v-deep .van-tabs__wrap {
  height: 1.22667rem;
  background: linear-gradient(270deg, #fa59b5, #e38afb)
}

::v-deep.van-list {
  width: 100%
}

::v-deep .van-tabs__nav {
  background-color: transparent;
}

.list {
  height: 100%;
  overflow: auto;
  background-color: #fcf0fa
}

.list .van-tab__text {
  color: #fff
}

.list .van-tabs__line {
  background-color: #fff
}

.emptyView {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.emptyView .emptyViewimg {
  width: 8rem;
  height: 8rem
}

.emptyView .emptyViewText {
  color: #aaa;
  font-size: .37333rem;
  font-weight: 700;
  margin: .53333rem 0
}

.emptyView .emptyViewBtn {
  display: flex;
  width: 80%;
  height: 1.2rem;
  background: linear-gradient(270deg, #fa59b5, #e38afb);
  align-items: center;
  justify-content: center;
  border-radius: .16rem
}

.emptyView .emptyViewBtnText {
  font-size: .42667rem;
  font-weight: 700;
  color: #000
}

.listcontainer {
  color: #fcf0fa;
  background-color: #f5dcf1
}

.listcontainer .item {
  border-bottom: .02667rem solid #f2f2f5;
  margin: 0 .26667rem;
  padding: .4rem 0
}

.listcontainer .item .item_cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: .13333rem 0
}

.listcontainer .item .item_cell .item_left {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center
}

.listcontainer .item .item_cell .item_cell_betMoney {
  color: #ff253f;
  font-size: .37333rem
}

.listcontainer .item .item_cell .item_cell_name {
  color: #fa59b5;
  font-size: .42667rem
}

.listcontainer .item .item_cell .item_cell_period {
  font-size: .32rem;
  margin: 0 .13333rem;
  color: #000
}

.listcontainer .item .item_cell .item_cell_playName {
  color: #000;
  font-size: .37333rem
}

.listcontainer .item .item_cell .item_cell_statusText {
  font-size: .42667rem
}

.container .tabs, .container {

}

.container {
  bottom: 0;
}

.container .nav {
  background: linear-gradient(270deg, #fff, #fff)
}

.container .nav .tabs {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center
}

.container .nav .tabs .tab {
  width: 1.86667rem;
  height: .96rem;
  display: flex;
  justify-content: center;
  align-items: center
}

.container .nav .tabs .tab .text {
  font-size: .48rem
}

.container .nav .tabs .tab .activeText {
  color: #e38afb;
  font-weight: 700
}

.container .nav .tabs .tab .inactiveText {
  color: #cdccce
}

.container .nav .tabs .underLine {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: .26667rem;
  height: .08rem;
  border-radius: .08rem;
  background-color: #fff;
  transition: all .2s ease-in-out 0s
}

.container .nav .tabs .underLineStatus0 {
  margin-left: -1.06667rem
}

.container .nav .tabs .underLineStatus1 {
  margin-left: .8rem
}

.container .nav .menuBtn {
  color: #e38afb
}

.container .content {
  height: calc(100% - 1.22667rem)
}


.container .datetimepicker {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fcf0fa
}

.container .datetimepicker .van-picker__columns {
  background: #fcf0fa
}

.container .datetimepicker .van-picker__mask {
  background: transparent
}

.container .datetimepicker .van-ellipsis {
  color: #000
}

.container .datetimepicker .van-picker__toolbar {
  background-color: #f2f2f5
}

.container .datetimepicker .van-picker-column__item--selected {
  margin: auto;
  width: 100%;
  border-radius: 0;
  background-color: #f2f2f5
}

.container .datetimepicker .handleBox {
  padding-left: .53333rem;
  padding-right: .53333rem
}

.container .datetimepicker .handleBox .handleText {
  font-size: .42667rem
}

.container .datetimepicker .handleBox .confirmText {
  color: #fa59b5
}

.container .mask1 {
  background-color: rgba(0, 0, 0, .4)
}

.container .mask2 {
  background-color: rgba(0, 0, 0, .5);
  z-index: 12
}

.container .navigation {
  position: fixed;
  right: 0;
  top: 0;
  padding-left: .26667rem;
  padding-right: .26667rem;
  height: 100%;
  width: 80%;
  background-color: #fcf0fa;
  color: #fa59b5;
  z-index: 10;
  overflow-y: auto;
  box-shadow: .8rem 0 .8rem .8rem hsla(0, 0%, 88.2%, .2);
  -webkit-overflow-scrolling: touch
}

.container .navigation .timeBox {
  padding-bottom: .53333rem
}

.container .navigation .timeBox .title {
  display: flex;
  height: 1.33333rem;
  justify-content: flex-start;
  align-items: center
}

.container .navigation .timeBox .title .titleText {
  font-size: .48rem
}

.container .navigation .timeBox .datetimepickerBtnBox {
  display: flex;
  flex-direction: row;
  justify-content: center
}

.container .navigation .timeBox .datetimepickerBtnBox .datetimepickerBtnDashes {
  display: flex;
  align-items: center;
  font-size: .42667rem;
  margin-left: 2%;
  margin-right: 2%
}

.container .navigation .timeBox .datetimepickerBtnBox .datetimepickerBtn {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: .02667rem solid #fff;
  border-radius: .16rem;
  height: .96rem
}

.container .navigation .timeBox .datetimepickerBtnBox .datetimepickerBtn .datetimepickerBtnText {
  font-size: .42667rem
}

.container .navigation .lotteryBox {
  border-top: .02667rem solid #f2f2f5
}

.container .navigation .lotteryBox .title {
  display: flex;
  height: 1.33333rem;
  justify-content: flex-start;
  align-items: center
}

.container .navigation .lotteryBox .title .titleText {
  font-size: .48rem
}

.container .navigation .lotteryBox .lotteryWrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start
}

.container .navigation .lotteryBox .lotteryWrapper .lotteryItem {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .10667rem;
  height: .96rem;
  margin-bottom: 2%;
  margin-right: 2%
}

.container .navigation .lotteryBox .lotteryWrapper .lotteryItem .lotteryItemText {
  font-size: .37333rem;
  padding-left: .13333rem;
  padding-right: .13333rem
}

.container .navigation .lotteryBox .lotteryWrapper .itemLightStyle {
  color: #fcf0fa;
  background: #fa59b5
}

.container .navigation .lotteryBox .lotteryWrapper .itemDefaultStyle {
  color: #979799;
  border: .02667rem solid #979799
}

.container .navigation .bottomBox {
  position: absolute;
  bottom: .53333rem;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between
}

.container .navigation .bottomBox .resetBtn {
  border: .02667rem solid #fa59b5
}

.container .navigation .bottomBox .resetBtn .bottomBtnText {
  color: #fa59b5
}

.container .navigation .bottomBox .confirmBtn {
  background-color: #fa59b5
}

.container .navigation .bottomBox .confirmBtn .bottomBtnText {
  color: #fcf0fa
}

.container .navigation .bottomBox .confirmBtn, .container .navigation .bottomBox .resetBtn {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  border-radius: .58667rem;
  height: 1.17333rem;
  margin-left: .26667rem;
  margin-right: .26667rem
}

.container .navigation .bottomBox .confirmBtn .bottomBtnText, .container .navigation .bottomBox .resetBtn .bottomBtnText {
  font-size: .42667rem;
  font-weight: 500
}

.sidebar-slide-right-enter-from, .sidebar-slide-right-leave-to {
  opacity: 0;
  transform: translate(50%) !important;
  transition: transform .35s, opacity .35s
}

.sidebar-slide-right-enter-to, .sidebar-slide-right-leave-from {
  transition: transform .35s, opacity .35s
}

</style>
